import {getLocalePrefix} from "@/utils";
import React, {useEffect, useState} from "react";
import {Button, Col, message, Row, Table} from "antd";
import TweenOne from 'rc-tween-one'
import zhCN from "@/locales/zh-CN";
import {getLocale} from "@umijs/max";
import enUS from "@/locales/en-US";
import backgroundEn from '@/assets/images/joinUs/background-en.png'
import background from '@/assets/images/joinUs/background.png'
import styles from "./styles.css";

import team from '@/assets/images/joinUs/work/1.png'
import workplace from '@/assets/images/joinUs/work/2.png'
import environment from '@/assets/images/joinUs/work/3.png'

import birthday from '@/assets/images/joinUs/benifits/birthday.png'
import leave from '@/assets/images/joinUs/benifits/leave.png'
import salary from '@/assets/images/joinUs/benifits/salary.png'
import state from '@/assets/images/joinUs/benifits/state.png'

const WorkCard = ({name, current}: any) => {
  const getLocaleSuffix = getLocalePrefix('join.work')
  const imageMapper: any = {
    'team': team,
    'workplace': workplace,
    'environment': environment,
  }
  const title = getLocaleSuffix(name)
  const description = getLocaleSuffix(`${name}Intro`)
  const [config, setConfig] = useState<any>({
    pause: true,
    reverse: false
  })
  const animation = {
    y: -80,
    duration: 400,
    ease: 'easeOutBack',
  }
  useEffect(() => {
    if (current === name) {
      setConfig({pause: false, reverse: false})
    } else {
      setConfig({reverse: true})
    }
  }, [current]);
  return (
      <div
          className={styles.workCard}>
        <img style={{overflow: 'hidden'}} height={240} src={imageMapper[name]} alt={name}/>
        <TweenOne
            animation={animation}
            paused={config.pause}
            reverse={config.reverse}
        >
          <div className={styles.textContainer}>
            <span className={styles.cardTitle}>{title}</span>
            <p className={styles.cardDescription}>{description}</p>
          </div>
        </TweenOne>
      </div>
  )
}
const WelfareCard = ({index, text}: any) => {
  const imageArr: any = [salary, state, leave, birthday]
  return (
      <div>
        <Row justify={'center'}>
          <img width={150} src={imageArr[index]} alt={''}/>
        </Row>
        <Row justify={'center'} className={styles.text}>{text}</Row>
      </div>
  )
}
export default () => {
  const getLocaleSuffix = getLocalePrefix('join')
  const [current, setCurrent] = useState<any>()
  const [messageApi, contextHolder] = message.useMessage();
  const msg = getLocaleSuffix('position.tableInfo.message')
  const tableData = [
    {
      key: '1',
      position: '云平台管理方向',
      location: '杭州',
      benefits: '面议',
      number: '人数不限',
      responsibilities: [
        '负责PaaS平台系统部署、管理及优化。',
        '负责PaaS平台日常运行状态的监控与管理以及安全事件的分析诊断及应急处置。',
        '负责云本地容器仓库的搭建和维护管理。',
        '负责容器相关开源技术的持续跟踪引进，丰富 PaaS平台能力。',
      ],
      requirements: [
        '计算机及相关专业本科以上学历。',
        '了解Linux操作系统和容器化部署（docker, K8S架构），熟悉操作系统相关性能参数收集和调整。',
        '了解jenkins、mysql、redis、kafka、spark等组件之一。',
        '了解 DevOps 流程，了解使用开源 CI/CD 技术工具。',
      ],
    },
    {
      key: '2',
      position: '项目管理方向',
      location: '杭州',
      benefits: '面议',
      number: '人数不限',
      responsibilities: [
        '开展需求调研，完成业务需求收集并形成规范的文档。',
        '进行客户的业务需求分析，完成相应咨询方案的制定。',
        '负责项目监督，及时了解项目进度，定期形成进度汇报材料向客户汇报进度情况。',
        '项目资料整理，对项目过程中形成的各类文档进行收集、整理、归档。',
      ],
      requirements: [
        '计算机及相关专业本科以上学历。',
        '对项目管理方法和管理工具有一定了解，熟练使用办公软件。',
        '具备较强的分析、决策和解决问题的能力。',
        '积极、主动、敬业，有良好的自学能力和沟通能力。',
      ],
    },
    {
      key: '3',
      position: '软件开发方向',
      location: '杭州',
      benefits: '面议',
      number: '人数不限',
      responsibilities: [
        '参与开发应用系统软件功能模块程序编码，确保业务需求的实现。',
        '根据项目需求分析及设计文档，完成应用系统开发阶段任务。',
        '根据应用架构、数据架构、技术架构，做好领域技术标准的实施。',
        '负责应用系统的优化和完善，更好地满足用户需求。',
      ],
      requirements: [
        '计算机及相关专业本科以上学历。',
        '熟练掌握至少1门及以上主流编程语言，如：C++、JAVA、Python等。',
        '了解应用软件的开发与发布流程，对终端开发环境较熟悉。',
        '积极、主动、敬业，对开发有浓厚兴趣、有良好的自学能力和沟通能力。',
      ],
    },
  ]
  const enTableData = [
    {
      key: '1',
      position: 'Software Development Direction',
      location: 'Hangzhou',
      benefits: 'Wage negotiable',
      number: 'Infinite',
      responsibilities: [
        'Participate in the development of application system software function module program coding to ensure the realization of business requirements.',
        'According to the project requirements analysis and design doc, complete the application system development phase tasks.',
        'According to the application architecture, data architecture, and technical architecture, do a good job in the implementation of technical standards in the field.',
        'Responsible for the optimization and improvement of the application system to better meet user requests.',
      ],
      requirements: [
        'Bachelor degree or above in computer and related majors.',
        'Proficient in at least 1 or more mainstream programming languages, such as: C++, JAVA, Python, etc.',
        'Understand the development and release process of application software, and be familiar with the endpoint development environment.',
        'Active, proactive, dedicated, have a strong interest in development, have good self-learning ability and communication skills.',
      ],
    },
    {
      key: '2',
      position: 'Cloud Computing Platform Management Direction',
      location: 'Hangzhou',
      benefits: 'Wage negotiable',
      number: 'Infinite',
      responsibilities: [
        'Responsible for PaaS platform system deployment, management, and optimization.',
        'Responsible for monitoring and managing the daily running status of the PaaS platform, including analysis, diagnosis, and emergency response to security incidents.',
        'Responsible for the construction and maintenance management of the local container warehouse in the cloud.',
        'Responsible for continuous tracking and introduction of container-related open-source technologies to enhance the capabilities of the PaaS platform.',
      ],
      requirements: [
        'Bachelor degree or above in computer and related majors.',
        'Understanding of Linux operating system and containerized deployment (docker, K8S architecture), familiarity with operating system-related performance parameter collection and adjustment.',
        'Understanding of at least one component, such as Jenkins, MySQL, Redis, Kafka, Spark, etc.',
        'Understanding of the DevOps process and experience with open-source CI/CD technology tools.',
      ],
    },
    {
      key: '3',
      position: 'Project Management',
      location: 'Hangzhou',
      benefits: 'Wage negotiable',
      number: 'Infinite',
      responsibilities: [
        'Carry out demand research, complete business demand collection, and form a standardized document.',
        'Conduct customer business needs analysis and complete the formulation of corresponding consulting programs.',
        'Responsible for project supervision, keeping abreast of project progress, and regularly preparing progress reporting materials to report the progress to customers.',
        'Project data collation, collect, organize, and archive all kinds of documents formed during the project process.',
      ],
      requirements: [
        'Bachelor degree or above in computer and related majors.',
        'Have a certain understanding of project management methods and management tools, and be proficient in using working software.',
        'Strong analytical, decision-making, and problem-solving skills.',
        'Active, proactive, dedicated, with good self-learning ability and communication skills.',
      ],
    },
  ]
  return (
      <div>
        {contextHolder}
        <div>
          <img width={'100%'} src={getLocale() === 'en-US' ? backgroundEn : background} alt={'background'}/>
        </div>

        <div className={styles.workContainer}>
          <Row justify={'center'}>
            <span className={styles.title}>{getLocaleSuffix('work.title')}</span>
          </Row>
          <Row className={styles.workContainer} gutter={2}>
            <Col onMouseEnter={() => setCurrent('team')} onMouseLeave={() => setCurrent('')} span={8}><WorkCard
                current={current} name={'team'}/></Col>
            <Col onMouseEnter={() => setCurrent('workplace')} onMouseLeave={() => setCurrent('')} span={8}><WorkCard
                current={current} name={'workplace'}/></Col>
            <Col onMouseEnter={() => setCurrent('environment')} onMouseLeave={() => setCurrent('')} span={8}><WorkCard
                current={current}
                name={'environment'}/></Col>
          </Row>
        </div>
        <div className={styles.benefitContainer}>
          <Row justify={'center'} className={styles.title}>{getLocaleSuffix('welfare.title')}</Row>
          <Row justify={'space-around'} align={'middle'} gutter={4}>
            {[0, 1, 2, 3].map((index) => (
                <Col span={5}><WelfareCard index={index} text={getLocaleSuffix(`welfare.items.${index}`)}/></Col>))}
          </Row>
          <Row justify={'center'} className={styles.subtitle}>{getLocaleSuffix('welfare.subtitle')}</Row>
        </div>
        <div className={styles.positionContainer}>
          <Row justify={'center'}>
            <span className={styles.title}>{getLocaleSuffix('position.title')}</span>
          </Row>
          <Row justify={'center'}>
            <span className={styles.subtitle}>{getLocaleSuffix('position.email')}</span>
          </Row>
          <div className={styles.tableContainer}>
          <Table
              pagination={false}
              dataSource={getLocale() === 'zh-CN' ? tableData : enTableData}
              columns={getLocale() === 'zh-CN'
                  ? zhCN.join.position.tableColumn
                  : enUS.join.position.tableColumn}
              expandable={{
                expandRowByClick: true,
                expandedRowRender: (record) => (
                    <div className={styles.expand}>
                      <h3>{getLocaleSuffix('position.tableInfo.responsibilities')}</h3>
                      {record.responsibilities.map((text) => (<p>{text}</p>))}
                      <h3>{getLocaleSuffix('position.tableInfo.requirements')}</h3>
                      {record.requirements.map((text) => (<p>{text}</p>))}
                      <Button onClick={() => {
                        messageApi.info(msg)
                      }} type={'primary'}>{getLocaleSuffix('position.tableInfo.submit')}</Button>
                    </div>
                ),
              }}
          />
          </div>
        </div>
      </div>
  )
};
